<template>
    <div>
        <BackC />
        <main>
            <div class="account-inp inp">
                <van-cell-group :border="false">
                    <van-field v-model="account" label="手机号码" placeholder="请输入手机号码" />
                </van-cell-group>
            </div>
            <div class="passname-inp inp">
                <van-cell-group :border="false">
                    <van-field v-model="passname" label="用户名" placeholder="请填写用户名" error-message="不能大于10个字符" />
                </van-cell-group>
            </div>
            <div class="password-inp inp">
                <van-cell-group :border="false">
                    <van-field v-model="password" type="password" label="密码" placeholder="请填写密码" error-message="以字母开头，长度在6~18之间，只能包含字母、数字和下划线" />
                </van-cell-group>
            </div>
            <div class="password-inp inp">
                <van-cell-group :border="false">
                    <van-field v-model="againPassword" type="password" label="再次输入密码" placeholder="再次填写密码" />
                </van-cell-group>
            </div>
            <router-link tag="p" replace to="/login">已有账号，去登录</router-link>
            <div class="btn" :class="account && password && passname && againPassword ? 'active' : ''" @click="signup">注册</div>
        </main>
    </div>
</template>

<script>
import BackC from "@/components/BackC.vue";
export default {
    data() {
        return {
            account: "",
            passname: "",
            password: "",
            againPassword: "",
            id: 0,
        };
    },
    components: {
        BackC,
    },
    methods: {
        all() {
            this.axios("http://127.0.0.1/all").then(({ data }) => {
                this.id = data.length + 1;
            });
        },
        signup() {
            if (!this.account) {
                this.$toast.fail("账号不能为空");
                return;
            }
            if (!this.passname) {
                this.$toast.fail("用户名不能为空");
                return;
            }
            if (!this.password) {
                this.$toast.fail("密码不能为空");
                return;
            }
            if (!this.againPassword) {
                this.$toast.fail("请再次输入密码");
                return;
            }
            if (this.account) {
                let reg = /^\d{11}$/;
                if (!reg.test(this.account)) {
                    this.$toast.fail("请输入11位数的号码");
                    return;
                }
            }
            if (this.passname.length > 10) {
                this.$toast.fail("请按要求输入用户名");
                return;
            }
            if (this.password) {
                let reg = /^[a-zA-Z]\w{5,17}$/;
                if (!reg.test(this.password)) {
                    this.$toast.fail("密码必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线");
                    return;
                }
            }
            if (this.againPassword != this.password) {
                this.$toast.fail("再次输入密码不正确");
                return;
            }
            this.all();
            this.axios
                .post("http://127.0.0.1/signup", {
                    params: {
                        id: this.id,
                        account: this.account,
                        passname: this.passname,
                        password: this.password,
                    },
                })
                .then(({ data }) => {
                    if (data.status == 200) {
                        this.$toast.success(data.message);
                        this.$router.replace("/login");
                    }
                })
                .catch((err) => {
                    console.log("操作失败" + err);
                });
        },
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            vm.account = "";
            vm.passname = "";
            vm.password = "";
            vm.againPassword = "";
        });
    },
};
</script>

<style lang="scss" scoped>
main {
    padding: 15vh 10vw 0;
    .inp {
        padding-bottom: 1vh;
        border-bottom: 2px solid rgba($color: #ccc, $alpha: 0.2);
    }
    p {
        margin-top: 1vh;
        font-size: 14px;
        color: rgba($color: #bababa, $alpha: 1);
        margin-bottom: 2vh;
    }
    .btn {
        width: 100%;
        height: 3.125rem;
        border-radius: 30px;
        text-align: center;
        line-height: 3.125rem;
        background-color: #ccc;

        color: #fff;
        font-weight: 600;
    }
    .active {
        background-color: #1ba784;
    }
}
</style>
